<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title><span th:text="${subject}"></span></title>
    <style>
        body, h1, h2, h3, li, ul {
            margin: 0;
            padding: 0
        }

        body {
            margin: 0 auto;
            font-size: 14px;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        ul {
            list-style: none
        }

        a {
            text-decoration: none;
            color: #409eff
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 1000px;
        }

        .header {
            display: flex;
            justify-content: center;
            border-bottom: 6px solid #ed3f14
        }

        .header .logo {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex: 1;
        }

        .header .title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            flex: 3;
        }

        .header .date {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: flex-end;
            margin: 5px 0;
            font-size: 12px;
            flex: 1;
        }

        .content {
            padding: 10px
        }

        .content table thead th {
            background: #f2f7fe;
            padding: 5px;
            border: 1px solid #b8cce2;
            padding-left: 5px;
            color: #333;
            height: 24px
        }

        .content table tbody td {
            padding: 2px;
            border: 1px solid #b8cce2;
            padding-left: 5px;
            color: #333;
            height: 24px;
            text-align: center
        }

        .footer {
            margin-top: 10px;
            border-top: 2px solid #ed3f14;
            height: 50px;
            line-height: 20px
        }

        .footer ul {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: 5px 0
        }

        .footer li {
            font-size: 12px
        }

    </style>
</head>

<body>
<div class="container">
    <div class="header">
        <div class="title">
            <h2><span th:text="${subject}"></span></h2>
        </div>
        <div class="date">
            日期：<span th:text="${#dates.format(new java.util.Date(), 'yyyy-MM-dd HH:mm:ss')}"></span>
        </div>
    </div>

    <div class="content">
        您好，<span th:text="${realname}"></span><br/>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您登录 <a href="http://fangtao2.hia-china.com">集客营销平台</a>账号和密码已生成，请登录系统修改密码。<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;账号：<span th:text="${username}"></span><br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<span th:text="${password}"></span><br/>

    </div>
    <div class="footer">
        <ul>
            <li>广州方陶科技有限公司&copy;综合管理部</li>
        </ul>
    </div>
</div>

</body>
</html>